<template>
  <div class="keyword-box">
    
    <img id="title" src="../assets/title.png">
    <div class="note">选择1~3个</div>
    <div class="button-box-2">    
      <mt-button v-bind:class="['btn-1',btn1 ? 'btn-active' : (choosed_flag && !btn1)?'disabled':'' ]" @click.native="isActive(1)">新主楼</mt-button>
      <mt-button v-bind:class="['btn-2',btn2 ? 'btn-active' : (choosed_flag && !btn2)?'disabled':'' ]" @click.native="isActive(2)">六十五</mt-button>
      <mt-button v-bind:class="['btn-3',btn3 ? 'btn-active' : (choosed_flag && !btn3)?'disabled':'' ]" @click.native="isActive(3)">双一流</mt-button>
    </div>
    <div class="button-box-3">    
      <mt-button v-bind:class="['btn-4',btn4 ? 'btn-active' : (choosed_flag && !btn4)?'disabled':'' ]" @click.native="isActive(4)">春华秋实</mt-button>
      <mt-button v-bind:class="['btn-5',btn5 ? 'btn-active' : (choosed_flag && !btn5)?'disabled':'' ]" @click.native="isActive(5)">春风十里</mt-button>
      <mt-button v-bind:class="['btn-6',btn6 ? 'btn-active' : (choosed_flag && !btn6)?'disabled':'' ]" @click.native="isActive(6)">大雪</mt-button>
    </div>
    <!--
    <div class="button-box-4">    
      <mt-button v-bind:class="['btn-6',btn6 ? 'btn-active' : (choosed_flag && !btn6)?'disabled':'' ]" @click.native="isActive(6)">六十五</mt-button>
    </div>
    -->
    <div class="button-box-5">    
      <mt-button v-bind:class="['btn-7',btn7 ? 'btn-active' : (choosed_flag && !btn7)?'disabled':'' ]" @click.native="isActive(7)">乘风破浪</mt-button>
      <mt-button v-bind:class="['btn-8',btn8 ? 'btn-active' : (choosed_flag && !btn8)?'disabled':'' ]" @click.native="isActive(8)">只若初见</mt-button>
      <mt-button v-bind:class="['btn-9',btn9 ? 'btn-active' : (choosed_flag && !btn9)?'disabled':'' ]" @click.native="isActive(9)">星空</mt-button>
    </div>
    <!--
    <div class="button-box-6">    
      <mt-button v-bind:class="['btn-9',btn9 ? 'btn-active' : (choosed_flag && !btn9)?'disabled':'' ]" @click.native="isActive(9)">双一流</mt-button>
    </div>
    -->
    <div class="inputbox">
      <!--<label>输入姓名：</label> -->
      <input class="input" type="text" placeholder="请输入你的名字" v-model="input" @change="inputChange">
    </div>

    <mt-button class="btn-poster" type="danger" @click="goposter">发送祝福</mt-button>
  </div>
</template>

<script>
import http from '../utils/HttpUtil.js';
import cookie from 'js-cookie';
export default {
  name: 'keyword',
  data(){
    return {
      input: "",
      choosed:[],
      choosed_flag: false,
      btn1: false,
      btn2: false,
      btn3: false,
      btn4: false,
      btn5: false,
      btn6: false,
      btn7: false,
      btn8: false,
      btn9: false,
    }
  },
  mounted(){
    window.title="北航校庆祝福";
    this.input = cookie.get('name');
    console.log('get from cookie ',this.input);
  },
  methods:{
    goposter(){
      if(this.choosed.length==0){
        this.$toast("请选择1-3个关键词！");
      }else if(this.input==""){
        this.$toast("请输入名字！")
       
      }
      else {
         console.info("name",this.input)
        let form = {
          query: {
            words: this.choosed
          },
          name: this.input 
        }
        http.post(
          '/anniversary/greet',
          form
        ).then((data)=>{
          this.$router.push({ path: '/poster', query: { url: data.data.url }});
        }).catch((err)=>{
          console.log(err.errmsg);
        })
      }
    },

    inputChange(){
      cookie.set('name',this.input);
    },

    isActive(e){
      switch(e){
        case 1:
          this.btn1=!this.btn1
          if(this.btn1){
            this.counter=this.counter-1
            this.choosed.push("新主楼")
          }else{
            this.counter=this.counter+1
            this.choosed.pop("新主楼")
          }
          break;

        case 2:
          this.btn2=!this.btn2
          if(this.btn2){
            this.counter=this.counter-1
            this.choosed.push("六十五")
          }else{
            this.counter=this.counter+1
            this.choosed.pop("六十五")
          }
          // console.info('choosed&&&&&&&&&',this.choosed)
          // console.info('length----------',this.choosed.length)
          break;

        case 3:
          this.btn3=!this.btn3
          if(this.btn3){
            this.counter=this.counter-1
            this.choosed.push("双一流")
          }else{
            this.counter=this.counter+1
            this.choosed.pop("双一流")
          }
          break;

        case 4:
          this.btn4=!this.btn4
          if(this.btn4){
            this.counter=this.counter-1
            this.choosed.push("春华秋实")
          }else{
            this.counter=this.counter+1
            this.choosed.pop("春华秋实")
          }
          break;

        case 5:
          this.btn5=!this.btn5
          if(this.btn5){
            this.counter=this.counter-1
            this.choosed.push("春风十里")
          }else{
            this.counter=this.counter+1
            this.choosed.pop("春风十里")
          }
          break;

        case 6:
          this.btn6=!this.btn6
          if(this.btn6){
            this.counter=this.counter-1
            this.choosed.push("大雪")
          }else{
            this.counter=this.counter+1
            this.choosed.pop("大雪")
          }
          break;
          
        case 7:
          this.btn7=!this.btn7
          if(this.btn7){
            this.counter=this.counter-1
            this.choosed.push("乘风破浪")
          }else{
            this.counter=this.counter+1
            this.choosed.pop("乘风破浪")
          }
          break;

        case 8:
          this.btn8=!this.btn8
          if(this.btn8){
            this.counter=this.counter-1
            this.choosed.push("只若初见")
          }else{
            this.counter=this.counter+1
            this.choosed.pop("只若初见")
          }
          break;

        case 9:
          this.btn9=!this.btn9
          if(this.btn9){
            this.counter=this.counter-1
            this.choosed.push("星空")
          }else{
            this.counter=this.counter+1
            this.choosed.pop("星空")
          }
          break;
      }
      
      console.info('choosed&&&&&&&&&',this.choosed)
      //console.info('length----------',this.choosed.length)

      if(this.choosed.length==3){
        this.choosed_flag=!this.choosed_flag
        //console.info("@@@@@@@@@@@@@",this.choosed_flag)
      }else{
        this.choosed_flag=false
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped type="text/css">

.keyword-box { 
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-image: url('../assets/2.jpg');
    background-size: 100% 100%;
}

.note {
  font-size: 14px;
}

.button-box-1 {
  float: left;
  width: 100%;
  padding: 5%;
  text-align: center;
}
/*按钮按下状态*/
.btn-active {
  color: white;
  background: #FF7256;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2), 0 1.5px 5px 0 rgba(0,0,0,0.19);
}
/*按钮禁用状态*/
.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  z-index:-1;
}
/*
.btn-1 {
  border: none;
  text-align: center;
  font-size: 16px;
  border-radius: 15%;
  width:25%;
  height: 32px;
}
*/
.btn-1 {
  border: none;
  text-align: center;
  font-size: 16px;
  border-radius: 15%;
  width:25%;
  height: 35px;
}

.button-box-2 {
  float: left;
  width: 100%;
  padding: 4%;
  text-align: center;
  margin-top: 7%;
}
.btn-2 {
  /*
  margin-left: 12%;
  float: left;
  */
  margin-left: 5%;
  border: none;
  text-align: center;
  font-size: 16px;
  border-radius: 15%;
  width:25%;
  height: 35px;
}
.btn-3 {
  /*
  margin-right: 12%;
  float: right;
  */
  margin-left: 5%;
  border: none;
  text-align: center;
  font-size: 16px;
  border-radius: 15%;
  width:25%;
  height: 35px;
}

.button-box-3 {
  float: left;
  width: 100%;
  padding: 4%;
  text-align: center;
}

.btn-4 {
  /*
  margin-left: 12%;
  float: left;
  */

  border: none;
  text-align: center;
  font-size: 16px;
  border-radius: 15%;
  width:30%;
  height: 35px;
}
.btn-5 {
  /*margin-right: 12%;
  float: right;
  */
  margin-left: 5%;
  border: none;
  text-align: center;
  font-size: 16px;
  border-radius: 15%;
  width:30%;
  height: 35px;
}
.btn-6 {
  /*margin-left: 43%;
  float: left;
  */
  margin-left: 5%;
  border: none;
  text-align: center;
  font-size: 16px;
  border-radius: 15%;
  width:20%;
  height: 35px;
}

.button-box-4 {
  float: left;
  width: 100%;
  padding: 4%;
  text-align: center;
}
/*
.btn-6 {
  margin-left: 43%;
  float: left;
  border: none;
  text-align: center;
  font-size: 16px;
  border-radius: 15%;
  width:25%;
  height: 32px;
}
*/
.button-box-5 {
  float: left;
  width: 100%;
  padding: 3%;
  text-align: center;
}
.btn-7 {
  /*margin-left: 15%;
  float: left;
  */
  border: none;
  text-align: center;
  font-size: 16px;
  border-radius: 15%;
  width:30%;
  height: 35px;
}
.btn-8 {
  /*
  margin-right: 15%;
  float: right;
  */
  margin-left: 5%;
  border: none;
  text-align: center;
  font-size: 16px;
  border-radius: 15%;
  width:30%;
  height: 35px;
}

.button-box-6 {
  float: left;
  width: 100%;
  padding: 3%;
  text-align: center;
}
.btn-9 {
  margin-left: 5%;
  border: none;
  text-align: center;
  font-size: 16px;
  border-radius: 15%;
  width:20%;
  height: 35px;
}

.inputbox {
  float: left;
  width: 100%;
  padding: 1%;
  margin-top: 2%;
  text-align: center;
}
.input {
    border-radius: 10px;
    padding: 5px;
    border: 1px solid #ccc;
    text-align: center;
    width: 45%;
    height: 40px;
    margin-top: 5%
}

#title {
  width: 90%;
  text-align: center;
  position: relative;
  margin-top: 30%; }

.btn-poster {
  margin-top: 3%;
  padding: 0 12px;
  border-radius: 8%;
  width: 45%;
 
}
</style>
